<template>
	<div class="role-container">
    <el-tabs class="system-role-tabs" v-model='EnterTab'>
      <el-tab-pane label="全部用户" name="all">
        <el-form ref="form" :model="editForm" label-width='90px' >
          <el-form-item label="编码">
            <el-input v-model="editForm.code" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="editForm.name" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱配额">
            <el-switch v-model="editForm.email"></el-switch>
            <el-input v-model="editForm.emailValue" v-show="editForm.email" style="width: 200px ;height: 30px"></el-input>
          </el-form-item>
          <el-form-item label="序号">
            <el-input v-model="editForm.serial" style="width: 200px"></el-input>（序号越大，表示角色级别越高，用于流程中比较角色大小）
          </el-form-item>
          <el-form-item label="管理本部门">
            <el-switch v-model="editForm.manage"></el-switch>（能够查看“部门工作”）
          </el-form-item>
          <el-form-item label="系统">
            <el-switch v-model="editForm.system"></el-switch>(系统角色对于集团中的子单位管理员可见)
          </el-form-item>
          <el-form-item label="类别">
            <el-switch v-model="editForm.category"></el-switch>
          </el-form-item>
          <el-form-item label="单位">
            <el-select v-model="editForm.unit">
              <el-option label="南京云网" value="南京云网"></el-option>
              <el-option label="事业部" value="事业部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onEditSubmit">确定</el-button>
            <el-button @click="editDialogVisible = false">返回</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="用户" name="role">
        <div style="float: left;margin-bottom:10px">
            <el-button size="mini" type="primary" @click="addDialogVisible = true">添加</el-button>
            <!-- <el-button size="mini" type="primary" @click="onDel">删除</el-button> -->
          </div>
        <el-table :data="roleTable" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="用户名" />
          <el-table-column prop="realName" label="真实姓名"  />
          <el-table-column prop="num" label="工号"  />
          <el-table-column prop="sex" label="性别"  />
          <el-table-column label="所属部门">
            <template #default="scope">
              <i class="el-icon-success defaultBelong"></i> 
                {{scope.row.department}}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <i class="el-icon-top system-Tablerole-icon" title="上移" @click="onRoleTableUp(scope.row)"></i> 
              <i class="el-icon-bottom system-Tablerole-icon" title="下移" @click="onRoleTableDown(scope.row)"></i>
              <i class="el-icon-delete system-Tablerole-icon" title="删除" @click="onRoleTableDown(scope.row)"></i>
              <i class="el-icon-s-operation system-Tablerole-icon" title="复制"></i>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <span class="notBelong">○</span>不属于<i class="el-icon-success defaultBelong"></i>默认属于<i class="el-icon-success showBelong"></i>显示属于（默认属于与显式属于的效果一样）
        </div>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="editDialogVisible = false">确定</el-button>
          <el-button @click="editDialogVisible = false">返回</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="权限" name="apply">
        <el-table :data="applyTable" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="apply" label="权限" width="180" />
          <el-table-column label="菜单项">
            <template #default="scope">
              <a href="#" v-for=" i in scope.row.menu" :key="i" class="apply-table">{{ i }}</a>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="editDialogVisible = false">确定</el-button>
          <el-button @click="editDialogVisible = false">返回</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="管理部门" name="department">
        <el-tree :data="departmentData" show-checkbox node-key="id" default-expand-all  ref="EnterTree" style="width: 200px;height: 300px">
          <template #default="{ node }">
            <i class="el-icon-folder-opened"></i>
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
        <p>用户所属角色管理的部门：</p>
        <p>销售总监:市场部(角色可管理本部门)</p>
        <p>部门经理:市场部(角色可管理本部门)</p>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="editDialogVisible = false">确定</el-button>
          <el-button @click="editDialogVisible = false">返回</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="菜单" name="menu">
        <el-table
          :data="menuTable"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
        >
          <el-table-column prop="item" label="菜单项" >
          </el-table-column>
          <el-table-column prop="category" label="类型">
          </el-table-column>
          <el-table-column prop="explain" label="权限/模块说明"> </el-table-column>
          <el-table-column prop="flow" label="模块/流程/基础数据"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
		  title="添加角色"
			v-model="addDialogVisible"
			width="50%"
			:before-close="handleClose"
      center
		>
			<el-form ref="form" :model="addForm" label-width="90px">
        <el-form-item label="编码">
          <el-input v-model="addForm.code" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addForm.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱配额">
          <el-switch v-model="addForm.email"></el-switch>
          <el-input v-model="addForm.emailValue" v-show="addForm.email"  style="width: 200px ;height: 30px"></el-input>
        </el-form-item>
        <el-form-item label="序号">
          <el-input v-model="addForm.serial"  style="width: 200px"></el-input>（序号越大，表示角色级别越高，用于流程中比较角色大小）
        </el-form-item>
        <el-form-item label="管理本部门">
          <el-switch v-model="addForm.manage" ></el-switch>（能够查看“部门工作”）
        </el-form-item>
        <el-form-item label="系统">
          <el-switch v-model="addForm.system"></el-switch>(系统角色对于集团中的子单位管理员可见)
        </el-form-item>
        <el-form-item label="类别">
          <el-switch v-model="addForm.category"></el-switch>
        </el-form-item>
        <el-form-item label="单位">
          <el-select v-model="addForm.unit">
            <el-option label="南京云网" value="南京云网"></el-option>
            <el-option label="事业部" value="事业部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddSubmit" style="float:right">确定</el-button>
          <el-button @click="addDialogVisible = false" style="float:right;margin-right: 10px">返回</el-button>
        </el-form-item>
      </el-form>
		</el-dialog>
	</div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue';
export default {
  name: 'editRole',
  setup() {
    const state = reactive({
      EnterTab: 'all',
      editForm:{
        name:'',
        code:'',
        email:false,
        unit:'南京云网',
        category:false,
        system:false,
        manage:false,
        serial:'',
        emailValue:'',
      },
      roleTable:[
        {
          name: 'lihao',
          realName: '李浩',
          num: '',
          sex: '男',
          department: "行政部",
        },
        {
          name: 'zhangsan',
          realName: '张三',
          num: '',
          sex: '男',
          department: "行政部",
        },
        {
          name: 'lisi',
          realName: '李四',
          num: '',
          sex: '男',
          department: "行政部",
        },
        {
          name: 'wangwu',
          realName: '王五',
          num: '',
          sex: '男',
          department: "行政部",
        }
      ],
      applyTable:[
        {
          apply:"发起流程",
          menu:["流程\发起流程",'流程\工作交办','顶部菜单\流程'],
        },
        {
          apply:"短信发送",
          menu:[],
        },
        {
          apply:"工作计划",
          menu:[],
        },
        {
          apply:"发送内部消息",
          menu:["顶部菜单\消息"],
        }
      ],
      menuTable:[
        {
					id: 1,
					category: '链接',
					item: '全部',
					explain: '',
					flow: '',
					children: [
						{
              id: 11,
              category: '链接',
              item: '流程',
              explain: '',
              flow: '',
              children: [
                {
                  id: 111,
                  category: '链接',
                  item: '代办流程',
                  explain: '',
                  flow: '',
                },
                {
                  id: 112,
                  category: '链接',
                  item: '我的流程',
                  explain: '',
                  flow: '',
                },
                {
                  id: 113,
                  category: '链接',
                  item: '发起流程',
                  explain: '发起流程',
                  flow: '',
                },
                {
                  id: 114,
                  category: '链接',
                  item: '流程查询',
                  explain: '',
                  flow: '',
                },
                {
                  id: 115,
                  category: '链接',
                  item: '关注流程',
                  explain: '',
                  flow: '',
                },
                {
                  id: 115,
                  category: '链接',
                  item: '流程知会',
                  explain: '',
                  flow: '',
                },
                {
                  id: 115,
                  category: '链接',
                  item: '流程消息',
                  explain: '',
                  flow: '',
                },
              ],
            }
					],
				}
      ],
      departmentData: [
        {
          id: 1,
          label: '南京云网',
          children: [
            {
              id: 2,
              label: '总经办',
            },
            {
              id: 3,
              label: '行政部',
            },
            {
              id: 4,
              label: '市场部',
            },
            {
              id: 5,
              label: '财务部',
            },
            {
              id: 6,
              label: '事业部',
              children: [
                {
                  id: 7,
                  label: '商务部2',
                },
                {
                  id: 8,
                  label: '采购部2',
                },
                {
                  id: 9,
                  label: '研发部',
                },
                {
                  id: 10,
                  label: '推广部',
                },
              ],
            },
          ],
        },
      ],
      addDialogVisible: false,
      addForm:{
        name:'',
        code:'',
        email:false,
        unit:'南京云网',
        category:false,
        system:false,
        manage:false,
        serial:'',
        emailValue:'',
      },
      multipleSelection: [],
    });
    onMounted(() => {
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    onRoleTableUp (row){
      let r = ''
      this.roleTable.map((item, index)=>{
        item.name === row.name ? r = index : ''
      })
      if(r !== 0){
        this.roleTable.splice(r, 1)
        this.roleTable.splice(r-1, 0, row)
      }
    },
    onRoleTableDown (row){
      let r = ''
      this.roleTable.map((item, index)=>{
        item.name === row.name ? r = index : ''
      })
      if(r !== this.roleTable.length){
        this.roleTable.splice(r, 1)
        this.roleTable.splice(r+1, 0, row)
      }
    },
    onAddSubmit (){
      this.addDialogVisible = false
      let arr = []
      arr.name = this.addForm.name
      arr.realName = this.addForm.code
      arr.department = this.addForm.unit
      this.roleTable.push(arr)
    },
    handleSelectionChange(val) {
      let arr = []
      val.map(i =>{
        arr.push(i.name)
      })
      this.multipleSelection = [...arr]
    },
    onDel (){
      this.roleTable = this.roleTable.filter((item)=>{
        if(this.multipleSelection.indexOf(item.name) === -1){
          return true
        }else{
          return false
        }
      })
    }
  },
  created(){
    this.editForm.name = this.$route.query.name
    this.editForm.system = this.$route.query.system
    this.editForm.unit = this.$route.query.unit
    this.editForm.category = this.$route.query.category
  }
};
</script>

<style scoped lang="scss">
.role-container{
  .system-Tablerole-icon{
    font-size: 20px;
    cursor: pointer;
    padding-right: 8px;
    &:hover{
      color: red;
    }
  }
  .notBelong{
    font-size: 30px;
    top: 3px;
    position: relative;
    color: rgb(51,212,117);
  }
  .defaultBelong{
    padding: 0 5px;
    color: rgb(51,212,117);
    opacity: .5;
  }
  .showBelong{
    padding: 0 5px;
    color: rgb(51,212,117);
  }
   .apply-table{
    display: block;
  }
}
</style>
